<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS网页布局</title>
    <style>
        *{padding: 0;margin:0;}
        .header{width: 100%;height: 100px;border: 1px red dashed;background-color: #4d555d;}
        .header .logo div{width:300px;height: 85px;margin: 8px 0 0 150px;float: left;border: 1px red solid;border-radius: 5px;text-align: center;background-color: #4d555d;line-height: 85px;}
        .header .menu{height: 100px;float: right;}
        .header .menu ul{margin-right: 50px;}
        .header .menu li{float: right;list-style-type: none;width: 80px;font-family: "微软雅黑", serif;color: #433b90;font-size: 15px;line-height: 100px;font-weight: bold;text-align: center;}
        .main{background-color: #8edff3;}
        .main .pic div{width: 100%;height: 600px;position: relative;background-color: #aa0088;}
        .topLayer{background-color: aquamarine;/*透明度*/opacity: 0.5;z-index: 1;position: absolute;/* 绝对定位,相对于窗口top的距离 */top: 100px;width: 100%;height: 600px;}
        .main .btn{z-index: 2;width: 500px;height: 300px;position: absolute;top: 400px;margin-top:-150px;right: 50%;margin-right: -250px;text-align: center;}
        .main .btn p{padding-top: 100px;color: #ffffff;font-size: 45px;font-family: "微软雅黑", serif;font-weight: bold;}
        .main .btn button{margin-top: 50px;background-color: #F5704F;width: 200px;height: 60px;color: #ffffff;font-family: "微软雅黑", serif;font-size: 14px;text-align: center;/*!* 圆角  *!*/border-radius: 8px;}
        .main .content{color: #7c7d7f;font-size: 20px;font-weight: bold;}
        .main .content .top{width: 1000px;padding-top: 50px;/* 水平居中 */margin:0 auto;}
        .main .content .top .icon{float: left;width: 33.3%;text-align: center;}
        .main .content .top .icon .img{width:100px;height:100px;border: 1px red solid;margin: 0 auto;}
        .main .content .top .icon .des{padding-top: 20px;border: #433b90 1px solid;}
        .main .content .top .receipt{padding-top: 50px;clear: both;font-size: 22px;text-align: center;color: #E19796;font-weight: bold;font-style:italic ;}
        .main .content .top .picAndDes{padding-top: 50px;}
        .main .content .top .picAndDes .icon2{float: left;text-align: center;padding: 10px;}
        .main .content .top .picAndDes .icon2 .des1{padding-top: 10px;font-size: 20px;font-weight: bold;color: #7c7d7f;}
        .main .content .top .picAndDes .icon2 .des2{color: #BDBDBC;padding-top: 10px;}
        .main .content .top .picAndDes .icon2 .img{width: 310px;height: 260px;border: 1px solid red;}
        .cf{clear:both;}
        .main .content .bottom {width: 100%;padding-bottom: 30px;background-color: #F9F9F9;}
        .main .content .bottom .bottom-content {width: 1000px;margin: 0 auto 50px;}
        .main .content .bottom .bottom-content .title{text-align: center;padding-top: 50px;font-family: "微软雅黑", serif;padding-bottom: 40px;font-size: 20px;}
        .main .content .bottom .bottom-content .picContent dl{width: 470px;float: left;margin:10px 12px 10px 12px;}
        .main .content .bottom .bottom-content .picContent dl dd{padding-top: 20px;}
        .main .content .bottom .bottom-content .picContent dl dt .img{width:470px;height:480px;border: red 1px solid;}
        .footer{width: 100%;height: 100px;background-color: #292C35;color: #ffffff;text-align: center;line-height: 100px;font-family: "微软雅黑", serif;font-size: 15px;}
    </style>
</head>
<body>
<!-- 头部 -->
<div class="header">
    <div class="logo">
        <div>logo图片占位</div>
    </div>
    <div class="menu">
        <ul>
            <li>手记</li>
            <li>视频</li>
            <li>图片</li>
            <li>首页</li>
        </ul>
    </div>
</div>
<!-- 主体 -->
<div class="main">
    <div class="pic">
        <div></div>
    </div>
    <!-- 遮罩层 -->
    <div class="topLayer"></div>
    <!-- 最上层的内容 -->
    <div class="btn">
        <p>MY BEAUTIFUL LIFE</p>
        <button>LOOK MORE &nbsp;&nbsp;&gt;</button>
    </div>
    <!-- 内容展示区 -->
    <div class="content">
        <!-- 上部分 -->
        <div class="top">
            <div>
                <div class="icon weibo">
                    <div class="img"></div>
                    <div class="des">MICROBLOG</div>
                </div>
                <div class="icon weixin">
                    <div class="img"></div>
                    <div class="des">WECHAT</div>
                </div>
                <div class="icon qq">
                    <div class="img"></div>
                    <div class="des">QQ</div>
                </div>
            </div>
            <div class="receipt">
                "I want to give good things to record down,<br>after the recall will be very beautiful."
            </div>
            <div class="picAndDes">
                <div class="icon2 ">
                    <div class="img"></div>
                    <div class="des1">Cool Image</div>
                    <div Class="des2">Record The Picture</div>
                </div>
                <div class="icon2">
                    <div class="img"></div>
                    <div class="des1">Great Picture</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="icon2">
                    <div class="img"></div>
                    <div class="des1">Cool Image</div>
                    <div class="des2">Record The Picture</div>
                </div>
            </div>
        </div>
        <div class="cf"></div><!-- 清除浮动,否则下面的背景会上移 -->
        <!-- 下部分 -->
        <div class="bottom"><!--包裹层 -->
            <div class="bottom-content"><!--内容层 -->
                <div class="title">FROM THE PHOTO ALBUM</div>
                <div class="picContent">
                    <dl>
                        <dt><div class="img"></div></dt>
                        <dd>
                            Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.
                        </dd>
                    </dl>
                    <dl>
                        <dt><div class="img"></div></dt>
                        <dd>
                            Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.
                        </dd>
                    </dl>
                </div>
                <div class="cf"></div>
            </div>
            <div class="cf"></div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div class="footer">
    © 2024 imooc.com  京ICP备13046642号
</div>
</body>
</html>